<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Editor</title>
  <style>
    #editor {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
  </style>
</head>
<body>
<div id="editor"></div>
<div style="height: 0; overflow: hidden" id="table" contenteditable="true"><h1>安装</h1><p>通过 npm 安装 TextBus：</p><pre lang="null" theme="light"><div class="tb-code-line-number-bg"></div><div class="tb-code-content"><div class="tb-code-line"><code>npm install @tanbo/textbus</code></div></div></pre><p>在 html 中准备一个空的元素</p><pre lang="HTML" theme="light"><div class="tb-code-line-number-bg"></div><div class="tb-code-content"><div class="tb-code-line"><code>&lt;<span class="tb-hl-tag">body</span>&gt;</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&lt;<span class="tb-hl-tag">div&nbsp;</span><span class="tb-hl-attr-name">id</span>="<span class="tb-hl-attr-value">editor</span>"&gt;&lt;/<span class="tb-hl-tag">div</span>&gt;</code></div><div class="tb-code-line"><code>&lt;/<span class="tb-hl-tag">body</span>&gt;</code></div></div><div class="tb-pre-lang">HTML</div></pre><p>通过 css 选择器，或直接传入一个 DOM 元素初始化 TextBus。</p><pre lang="Typescript" theme="light"><div class="tb-code-line-number-bg"></div><div class="tb-code-content"><div class="tb-code-line"><code><span class="tb-hl-keyword">import</span>&nbsp;{ createEditor }&nbsp;<span class="tb-hl-keyword">from</span>&nbsp;<span class="tb-hl-string">'@tanbo/textbus'</span>;</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code><span class="tb-hl-keyword">import</span>&nbsp;<span class="tb-hl-string">'@tanbo/textbus/bundles/textbus.min.css'</span>;</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code><span class="tb-hl-keyword">const</span>&nbsp;editor =&nbsp;<span class="tb-hl-function">createEditor</span>(<span class="tb-hl-string">'#editor'</span>, {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// theme: // 可选 'dark' | 'mac-os' | 'mac-os-dark'，不传即为默认样式</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-function">uploader</span>(<span class="tb-hl-keyword">type</span>) {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// switch (type) {</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// &nbsp;&nbsp;case 'video':</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// &nbsp;&nbsp;&nbsp;&nbsp;console.log('上传视频');</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// &nbsp;&nbsp;&nbsp;&nbsp;break;</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// &nbsp;&nbsp;case 'image':</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// &nbsp;&nbsp;&nbsp;&nbsp;console.log('上传视频');</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// &nbsp;&nbsp;&nbsp;&nbsp;break;</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// &nbsp;&nbsp;case 'audio':</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// &nbsp;&nbsp;&nbsp;&nbsp;console.log('上传音频');</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// &nbsp;&nbsp;&nbsp;&nbsp;break;</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// }</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-keyword">return</span>&nbsp;<span class="tb-hl-builtin">Promise</span>.<span class="tb-hl-function">resolve</span>().<span class="tb-hl-function">then</span>(() =&gt; {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-keyword">return</span>&nbsp;<span class="tb-hl-string">'/test'</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;})</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;},</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;contents:&nbsp;<span class="tb-hl-string">`&lt;p&gt;欢迎你使用&amp;nbsp;&lt;strong&gt;TextBus&lt;/strong&gt; 富文本编辑器...&lt;br&gt;&lt;/p&gt;`</span></code></div><div class="tb-code-line"><code>});</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code>editor.onChange.<span class="tb-hl-function">subscribe</span>(() =&gt; {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-builtin">console</span>.<span class="tb-hl-function">log</span>(editor.<span class="tb-hl-function">getContents</span>());</code></div><div class="tb-code-line"><code>});</code></div></div><div class="tb-pre-lang">Typescript</div></pre><h3>通过标签引入 TextBus</h3><p>你也可以直接下载 TextBus 的 js 文件和 css 文件，然后引用到你的页面中：</p><p>点击下载&nbsp;<a href="https://textbus.tanboui.com/static/textbus/textbus.min.js">textbus.min.js</a>&nbsp;&nbsp;&nbsp;<a href="https://textbus.tanboui.com/static/textbus/textbus.min.css">textbus.min.css</a></p><pre lang="HTML" theme="light"><div class="tb-code-line-number-bg"></div><div class="tb-code-content"><div class="tb-code-line"><code>&lt;!DOCTYPE html&gt;</code></div><div class="tb-code-line"><code>&lt;<span class="tb-hl-tag">html&nbsp;</span><span class="tb-hl-attr-name">lang</span>="<span class="tb-hl-attr-value">en</span>"&gt;</code></div><div class="tb-code-line"><code>&lt;<span class="tb-hl-tag">head</span>&gt;</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&lt;<span class="tb-hl-tag">meta&nbsp;</span><span class="tb-hl-attr-name">charset</span>="<span class="tb-hl-attr-value">UTF-8</span>"&gt;</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&lt;<span class="tb-hl-tag">title</span>&gt;TextBus 示例&lt;/<span class="tb-hl-tag">title</span>&gt;</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&lt;<span class="tb-hl-tag">link&nbsp;</span><span class="tb-hl-attr-name">href</span>="<span class="tb-hl-attr-value">https://textbus.tanboui.com/static/textbus/textbus.min.css</span>"<span class="tb-hl-tag">&nbsp;</span><span class="tb-hl-attr-name">rel</span>="<span class="tb-hl-attr-value">stylesheet</span>"&gt;</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&lt;<span class="tb-hl-tag">script&nbsp;</span><span class="tb-hl-attr-name">src</span>="<span class="tb-hl-attr-value">https://textbus.tanboui.com/static/textbus/textbus.min.js</span>"&gt;&lt;/<span class="tb-hl-tag">script</span>&gt;</code></div><div class="tb-code-line"><code>&lt;/<span class="tb-hl-tag">head</span>&gt;</code></div><div class="tb-code-line"><code>&lt;<span class="tb-hl-tag">body</span>&gt;</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&lt;<span class="tb-hl-tag">div&nbsp;</span><span class="tb-hl-attr-name">id</span>="<span class="tb-hl-attr-value">editor</span>"&gt;&lt;/<span class="tb-hl-tag">div</span>&gt;</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&lt;<span class="tb-hl-tag">script</span>&gt;</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var editor = textbus.createEditor(document.getElementById('editor'));</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;editor.onChange.subscribe(function() {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(editor.getContents());</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&lt;/<span class="tb-hl-tag">script</span>&gt;</code></div><div class="tb-code-line"><code>&lt;/<span class="tb-hl-tag">body</span>&gt;</code></div><div class="tb-code-line"><code>&lt;/<span class="tb-hl-tag">html</span>&gt;</code></div></div><div class="tb-pre-lang">HTML</div></pre><h3>功能定制</h3><p>一般情况下，直接通过 createEditor 函数初始化 TextBus 即可。下面是一个较为全面的配置项，你可以根据你的需要，删除部分不要的功能。</p><pre lang="Typescript" theme="light"><div class="tb-code-line-number-bg"></div><div class="tb-code-content"><div class="tb-code-line"><code><span class="tb-hl-keyword">import</span>&nbsp;{</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;Editor,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 格式</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;fontFamilyFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;boldFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;linkFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;colorFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;fontSizeFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;italicFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;letterSpacingFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;lineHeightFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;strikeThroughFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;subscriptFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;superscriptFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;textAlignFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;textIndentFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;underlineFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;blockBackgroundColorFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;codeFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;backgroundColorFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;dirFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;tdBorderColorFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 工具，更多官方工具可在 https://github.com/tbhuabi/textbus/tree/master/src/lib/ui/toolbar/tools 文件夹下查看</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;boldTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;cleanTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;colorTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;fontFamilyTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;fontSizeTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;headingTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;historyBackTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;historyForwardTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;imageTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;italicTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;insertParagraphAfterTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;insertParagraphBeforeTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;linkTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;olTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;strikeThroughTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;textAlignTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;textBackgroundTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;textIndentTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;ulTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;underlineTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;unlinkTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;findTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;insertObjectTool,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;tableTool,</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 组件库</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;imageCardComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;todoListComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;baiduMapComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;jumbotronComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;wordExplainComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;timelineComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;progressComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;stepsComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;katexComponentExample,</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 扩展组件</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;StepComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;ProgressComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;TimelineComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;WordExplainComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;JumbotronComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;BaiduMapComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;TodoListComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;ImageCardComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;KatexComponent,</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 基础组件</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;ListComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;BlockComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;PreComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;AudioComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;VideoComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;ImageComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;TableComponent,</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 插件</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;DEVICE_OPTIONS,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;TOOLS,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;COMPONENT_CREATORS,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;ComponentStagePlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;DevicePlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;FullScreenPlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;ImageVideoResizePlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;LinkJumpPlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;OutlinesPlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;TableEditPlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;SourcecodeModePlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;Toolbar</code></div><div class="tb-code-line"><code>}&nbsp;<span class="tb-hl-keyword">from</span>&nbsp;<span class="tb-hl-string">'@tanbo/textbus'</span>;</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code><span class="tb-hl-keyword">export</span>&nbsp;<span class="tb-hl-keyword">const</span>&nbsp;editorOptions: EditorOptions = {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 配置主题，默认为空，可选 dark、mac-od、mac-os-dark</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;theme:&nbsp;<span class="tb-hl-string">'dark'</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 默认编辑时样式</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;editingStyleSheets: [</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;`[style*=color]:<span class="tb-hl-function">not</span>([style*=background-color])</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;a {color: inherit;}`,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-string">`a {text-decoration: underline; color: #449fdb; cursor: text;}`</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 配置组件</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;components: [</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;KatexComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;StepComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;ProgressComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;TimelineComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;WordExplainComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;JumbotronComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;BaiduMapComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;TodoListComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;ImageCardComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;ListComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;BlockComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;PreComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;AudioComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;VideoComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;ImageComponent,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;TableComponent</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 配置格式</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;formatters: [</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;fontFamilyFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;boldFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;linkFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;backgroundColorFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;blockBackgroundColorFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;codeFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;colorFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;fontSizeFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;italicFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;letterSpacingFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;lineHeightFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;strikeThroughFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;subscriptFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;superscriptFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;textAlignFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;textIndentFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;underlineFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;dirFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;tdBorderColorFormatter,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 配置注入项</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;providers: [{</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// 工具条工具注入参数</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;provide: TOOLS,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;useValue: [</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[historyBackTool, historyForwardTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[insertObjectTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[headingTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[boldTool, italicTool, strikeThroughTool, underlineTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[olTool, ulTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[fontSizeTool, textIndentTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[colorTool, textBackgroundTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[insertParagraphBeforeTool, insertParagraphAfterTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[fontFamilyTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[linkTool, unlinkTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[imageTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[textAlignTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[tableTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[findTool],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[cleanTool]</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;]</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;}, {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// 设备可选项注入参数</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;provide: DEVICE_OPTIONS,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;useValue: [{</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;<span class="tb-hl-string">'PC'</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;<span class="tb-hl-string">'100%'</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-keyword">default</span>:&nbsp;<span class="tb-hl-boolean">true</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;}, {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;<span class="tb-hl-string">'iPhone5/SE'</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;<span class="tb-hl-string">'320px'</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;}, {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;<span class="tb-hl-string">'iPhone6/7/8/X'</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;<span class="tb-hl-string">'375px'</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;}, {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;<span class="tb-hl-string">'iPhone6/7/8 Plus'</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;<span class="tb-hl-string">'414px'</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;}, {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;<span class="tb-hl-string">'iPad'</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;<span class="tb-hl-string">'768px'</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;}, {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;<span class="tb-hl-string">'iPad Pro'</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;<span class="tb-hl-string">'1024px'</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;}, {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:&nbsp;<span class="tb-hl-string">'A4'</span>,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;<span class="tb-hl-string">'842px'</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;}]</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;}, {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// 组件库示例注入参数</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;provide: COMPONENT_CREATORS,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;useValue: [</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imageCardComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;todoListComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;baiduMapComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jumbotronComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wordExplainComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timelineComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progressComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stepsComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;katexComponentExample,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;]</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;}],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 配置插件</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;plugins: [</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;Toolbar,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;OutlinesPlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;FullScreenPlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;DevicePlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;ComponentStagePlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;ImageVideoResizePlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;LinkJumpPlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;TableEditPlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;SourcecodeModePlugin,</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;],</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-comment">// 配置上传功能接口</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-function">uploader</span>(<span class="tb-hl-keyword">type</span>:&nbsp;<span class="tb-hl-builtin">string</span>) {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tb-hl-comment">// 上传实现，请阅读相关文档</span></code></div><div class="tb-code-line"><code>&nbsp;&nbsp;}</code></div><div class="tb-code-line"><code>};</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code><span class="tb-hl-keyword">const</span>&nbsp;editor =&nbsp;<span class="tb-hl-keyword">new</span>&nbsp;<span class="tb-hl-class-name">Editor</span>(document.<span class="tb-hl-function">getElementById</span>(<span class="tb-hl-string">'editor'</span>), editorOptions);</code></div><div class="tb-code-line"><code>editor.onChange.<span class="tb-hl-function">subscribe</span>(() =&gt; {</code></div><div class="tb-code-line"><code>&nbsp;&nbsp;<span class="tb-hl-builtin">console</span>.<span class="tb-hl-function">log</span>(editor.<span class="tb-hl-function">getContents</span>());</code></div><div class="tb-code-line"><code>});</code></div></div><div class="tb-pre-lang">Typescript</div></pre><p>注意：insertObjectTool 和 tableTool 是组合工具（GroupTool），包含了部分其它工具。基本工具是最小单位，你也可以自定义组合工具。</p><h3>部分组件配置项</h3><p>代码块风格配置</p><pre lang="Typescript" theme="light"><div class="tb-code-line-number-bg"></div><div class="tb-code-content"><div class="tb-code-line"><code><span class="tb-hl-keyword">import</span>&nbsp;{ PreComponeent }&nbsp;<span class="tb-hl-keyword">from</span>&nbsp;<span class="tb-hl-string">'@tanbo/textbus'</span>;</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code>PreComponeent.theme =&nbsp;<span class="tb-hl-string">'dark'</span>;&nbsp;<span class="tb-hl-comment">// 默认为 light</span></code></div></div><div class="tb-pre-lang">Typescript</div></pre><p>百度地图 ak，请参考百度地图开发者文档</p><pre lang="Typescript" theme="light"><div class="tb-code-line-number-bg"></div><div class="tb-code-content"><div class="tb-code-line"><code><span class="tb-hl-keyword">import</span>&nbsp;{ BaiduMapComponent }&nbsp;<span class="tb-hl-keyword">from</span>&nbsp;<span class="tb-hl-string">'@tanbo/textbus'</span>;</code></div><div class="tb-code-line"><code><br></code></div><div class="tb-code-line"><code>BaiduMapComponent.ak =&nbsp;<span class="tb-hl-string">'xxxx'</span>;&nbsp;<span class="tb-hl-comment">// 你自己的 ak</span></code></div></div><div class="tb-pre-lang">Typescript</div></pre><div><br></div><p><br></p>
</div>

<p>
  <button type="button" id="btn">destroy</button>
</p>
</body>
</html>

